The toolbar is located immediately below the menu bar, and contains a variety of useful functions. These functions can all be accessed in other ways, but are sufficiently useful to some users that a shortcut is desirable:
We will begin by looking at the Insert drop down menu at the far right of the toolbar, marked with an + symbol. The same menu can be accessed from the menu bar via Arrange -> Insert.
The functionality provided by this drop down menu can be separated into two main categories. The top half consists of "Insert ..." options, the bottom half consists of arrange options: ways in which you can quickly build up and arrange a collection of diagram elements.
Insert Functions
Insert Text or Shape
These functions replicate the double click to insert text functionality, and dragging and dropping rectangles and ellipses into the diagrams area.
Insert link
URL links can also be inserted from this menu. Insert link brings up the following screen:
URLs can be typed or dragged onto the URL field. Alternatively, by clicking the appropriate button, you can browse for a file within Google Plus. The latter option is particularly versatile, as we shall now see. By clicking the Google+ button, we bring up a search screen.
Users can search for images, videos, maps, or files saved on their Google Drive account. Here we are searching for a draw.io instructional video, by clicking the Video search tab and typing draw.io into the search field.
The first video in the list looks like it might relate to this tutorial, so we click on that.
The video is now selected and outlined in blue. You can even play the video and access any controls that are embedded in the link. Having decided that we do indeed want to insert a link to this video, we press Select, and are returned to the URL screen.
Having acquired a URL, we press Insert.
We now have a link inserted into our draw.io diagram. Clicking on the link brings up a clickable link below it; clicking on this second link sends us to the associated URL.
Insert image
Images can also be inserted from this menu. Insert image brings up the following screen:
There are four main ways to add an image URL into the field above:
- Type or copy a URL directly into the Image (URL) field.
- Drag an image or URL associated with an image onto the blank window pane.
- Add an image by browsing your local file system (Device storage).
- Search for and select from online images.
In each case, the procedure is very similar to that used when adding a new symbol to a custom library, as explained in Using Libraries. PLease consult this page for further details.
Arrange Functions
Let us start by looking at the ways in which you can quickly build up collections of diagram elements. A number of commonly used arrangements are available; think of them as customisable templates.
Flow and Tree Arrangements
Let us select + ->Horizontal Flow as an example. When we select this arrange option, we bring up a arrangement screen
Within this space we can start building a diagram. We are limited in the ways that we can build the diagram. Keyboard shortcuts are blocked, and there is no access to menus, panels, and toolbars. The only way to add elements is to click the -> symbol on the right hand side of a shape. We shall do this for the start element.
The result is similar to if we did this in the normal work area. One difference is that the type of shape is selected for us. We can start to build up a diagram using this method.
The position of each new element is determine by draw.io and is set according to the neightbouring elements. It is possible to move an element by clicking and dragging in the usual way.
Note that as soon as any additional elements are created, any elements that have been moved by the user in this way will revert back to their predefined positions.
It is also possible to resize and rotate shapes, and to change the way that connectors connect to shape, since these actions can be achieved by highlighting the element and then using the mouse, without using any menus. Unlike moving elements, these actions will not be reset when new elements are created. Information on how to perform these actions can be found in Tutorial 3 - Connectors, Waypoints, and Altering Shapes.
In the example below, we have enlarged the start element, and rotated its child element by 90 degrees.
Once we are satisfied with the diagram, we can press Insert, and it will be inserted into the diagram, in the normal work space. Once it has been inserted, it can be changed using any of the funtionality in draw.io.
The other flow and tree arrangements work the same way. Here is an example vertical tree structure that has been inserted into a diagram.
.
Organic and Circle Arrangements
Organic and circle arrangements are built up and inserted in the same way. Here is an example of a organic diagram.
From text
It is possible to constuct a diagram using text statements. Selecting + -> From text brings up the following screen, containing the text for a simple circular diagram
This screen is a simple text editor. The ; symbol indicates a comment. Letters are used to indicate each element, and -> is used to indicate the direction of connectors between each element. It we keep this example text the same and press Insert, we get the following diagram.
This screen is a simple text editor, and more complexdiagrams can be cretaed by adding more lines. Let us say that we want to introduce a 4th element that connects from a. We add the line highlighted below:
and then press Insert to move the diagram to the main work space.
Changing arrangements
Once it has been imported, or created by other means, any existing diagram can be converted to any type of arrangement. This is not available from the toolbar however. It will be recalled from earlier that the toolbar functions correspond to those available from selecting Arrange -> Insert from the menu bar. We can instead select Arrange -> Layout, and apply any of the layouts/arrangements to an existing diagram. The six layouts from the toolbar can be applied, along with a new one, Radial Tree.
Let us select the whole of the vertical tree diagram we created earlier, and then apply Arrange -> Layout -> Radial tree to it.
The elements are automatically rearranged by draw.io to match the chosen layout. In this case, the result is as follows:
Depending on the outcome, the user may wish to make further manual adjustments to the resulting diagram.